<template>
	<view>
		<!-- 头部 -->
		<u-sticky>
			<view class="dingbu mainpadding2">
				<view class="" :style="{paddingTop:menutop+'rpx'}"></view>
			</view>
		</u-sticky>
		<view class="block dingwei mainpadding">
			<image class="dlbjt" src="../../static/image/system/dlbjt.png" mode=""></image>
			<view class="dingwei">
				<view class="sishi xiaohei fonweight">欢迎登录</view>
				<view class="xiahuaxian margin_top6">
					<input type="number" placeholder="请输入账号" v-model="mobile">
				</view>
				<view class="xiahuaxian margin_top">
					<input type="password" placeholder="请输入密码" v-model="password">
				</view>
				<view class="flexright margin_top">
					<!-- <view class="flexleft">
						<view class="weixz margin_right1"></view>
						<view class="margin_right1">
							<u-icon name="checkmark-circle-fill" color="#FF8000" size="16"></u-icon>
						</view>
						<view class="ershiba xiaohei">记住密码</view>
					</view> -->
					<view class="ershiba xiaohei" @click="tzwjmm">忘记密码？</view>
				</view>
				<view class="flexleft margin_top6" @click="checkaudio">
					<!-- 未选中 -->
					<view class="weixz margin_right1" v-if="!type"></view>
					<!-- 已选中 -->
					<view class="margin_right1" v-if="type">
						<u-icon name="checkmark-circle-fill" color="#FF8000" size="16"></u-icon>
					</view>
					<view class="flexleft">
						<view class="ershiba xiaohui">阅读并同意</view>
						<view class="ershiba xiaocheng" @click.stop="tzgywm(2)">《用户协议》</view>
						<view class="ershiba xiaohui">和</view>
						<view class="ershiba xiaocheng" @click.stop="tzgywm(3)">《隐私保护政策》</view>
					</view>
				</view>
				<view class="bigbtn margin_top" @click="login()" v-if="!liandiantype">登录</view>
				<view class="bigbtn margin_top" v-if="liandiantype">登录</view>
				<view class="flexcenter margin_top4">
					<view class="ershiba xiaohui">没有账号？</view>
					<view class="ershiba xiaocheng" @click="tzljzc">立即注册</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				menutop: 0,
				mobile: "",
				type:false,
				password:"",
				liandiantype:0
			}
		},
		onLoad() {
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
		},
		methods: {
			
				jumpurl(url) {
					uni.navigateTo({
						url
					})
				},
				checkaudio(){
					this.type = !this.type
				},
				//验证手机号
				isMobile(value) {
					let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value); 
					return a;
				},
				login(){
					let _this = this;
					if(_this.mobile == ''){
						httpRequest.toast("请输入手机号码!")
						return;
					}
					if(!_this.isMobile(_this.mobile)){
						httpRequest.toast("手机号码格式错误!")
						return;
					}
					if(this.password==""){
						httpRequest.toast("请输入密码")
						return false
					} 
					if(!this.type){
						httpRequest.toast("请认真阅读并勾选用户协议");
						return false;
					}
					this.liandiantype = 1
					uni.showLoading({
						mask:true,
						title:"请稍候"
					})
					httpRequest.request('/api/user/login','GET',{
						account:this.mobile, 
						password:this.password
					}).then(res => {
						if(res.code == 1){
							uni.hideLoading()
							httpRequest.toast('登录成功');
							uni.setStorageSync('token',res.data.userinfo.token);
							uni.setStorageSync('user_id',res.data.userinfo.user_id);
							setTimeout(()=>{
								uni.navigateBack(1)
							},1000)
						}else{
							this.liandiantype = 0
							uni.hideLoading()
							httpRequest.toast(res.msg);
						}
					})
				},
				isMobile(value) {
					let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value); 
					return a;
				},
			
			// 跳转忘记密码
			tzwjmm(){
				uni.navigateTo({
					url:'/pages/login/wangjimm'
				})
			},
			// 跳转立即注册
			tzljzc(){
				uni.navigateTo({
					url:'/pages/login/lijizhuce'
				})
			},
			tzgywm(i) {
				uni.navigateTo({
					url: '/pages/mypage/shiyongxd?id=' + i
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dlbjt{
		width: 100%;
		height: 303rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.weixz{
		width: 24rpx;
		height: 24rpx;
		border: 1rpx solid #999999;
		border-radius: 50%;
	}
	.dingbu {
		height: 288rpx;
		background-size: 100% 100%;
		width: 100%;
		box-sizing: border-box;
		background-image: url('../../static/image/system/dltb.png');
	}
</style>
